<template>
    <div class="buttonAreaClass">
        <div class="buttonItem" v-for="(item,index) in datas"
                                :key="item.key"
                                :class="[item.checked?item.activeClass:item.className]"
                                @click="buttonItemClick(item,index)"
        >{{item.title}}</div>

    </div>

</template>

<script lang="ts">
import { Component, Prop, Vue , Watch} from 'vue-property-decorator';
import MapCommon from '@/util/MapCommon';
@Component({
    name: 'ZhtsButtonArea',
    components: {},
    mixins: [MapCommon],
})
export default class ZhtsButtonArea extends Vue {

    get mapThreeObj () {

        let obj = {
            code:this.$store.state['cityListModule' as any].checkedCityObj.id,
            state:this.state,
            date:this.$store.state['ZhtsModule' as any].date,
            migrateType:this.$store.state['ZhtsModule' as any].migrateType,
        };
        return obj
    }

    @Watch('mapThreeObj', {deep: true})
    watchCount(newVal: any, oldVal:any) {

        // 给"疫情数据"传参
        const code: string = newVal.code;
        const state: string = newVal.state;
        this.getComponent().addSickMap(code);
        this.getComponent().addPopulationMap(code);

        this.getComponent().hideSickMap(); // 清除"疫情数据"图层
        this.getComponent().removeMigrationMap(); // 清除"迁徙图"图层
        this.getComponent().hidePopulationMap(); // 清除"人口数据"图层

        this.$store.dispatch("ZhtsModule/setTuliType", state );
        if(state){
            switch(state){
                //  "疫情数据"
                case "yiqingClass":
                    this.getComponent().showSickMap();
                    break;
                //  "人口数据"
                case "renkouClass":
                    this.getComponent().showPopulationMap();
                    break;
                //  "迁徙图"
                case "qianxiClass":
                    const date: string = newVal.date;
                    const migrateType: string = newVal. migrateType;
                    this.getComponent().addMigrationMap( code , date , migrateType);
                    break;
                default:
                    break;
            }
        }

    }
    private state: string = "yiqingClass";
    private datas: any = [
        {
            title:"疫情数据",
            className:"yiqingClass",
            activeClass:"yiqingActive",
            checked:true,
            key:"yiqing"
        },
        {
            title:"人口数据",
            className:"renkouClass",
            activeClass:"renkouActive",
            checked:false,
            key:"renkou"
        },
        {
            title:"迁徙图",
            className:"qianxiClass",
            activeClass:"qianxiActive",
            checked:false,
            key:"qianxi"
        }
    ];


    private getComponent() {
        const self: any = this;
        const modules = self.$ioc.resolve('GISModules-map');
        const component = modules.eventSituation.getComponent('compresituation');
        return component;
    }

    private buttonItemClick( item: any ,index: any ){
        // 反選邏輯
        if(item.checked === true){
            item.checked = false;
            this.state = '';
            switch(item.className){
                //  "疫情数据"
                case "yiqingClass":
                    break;
                //  "人口数据"
                case "renkouClass":
                    break;
                //  "迁徙图"
                case "qianxiClass":
                    break;
                default:

               break;
                    }
            return
        } else {
            // 選中邏輯
            this.state = item.className;
            switch(item.className){
                //  "疫情数据"
                case "yiqingClass":
                    break;
                //  "人口数据"
                case "renkouClass":
                    break;
                //  "迁徙图"
                case "qianxiClass":
                    break;
                default:
                    break;
            }
            this.datas.forEach( (ele: any) => {
                ele.checked =false;
            });
            item.checked =true;
            return;
        }

    }
    private mounted() {
        //初始化加载一次
        (this as any).resolveMap('map').then(() => {
            const code: string = this.$store.state['cityListModule' as any].checkedCityObj.id;
            this.getComponent().addSickMap(code);
            this.getComponent().showSickMap();

            this.$store.dispatch("ZhtsModule/setTuliType", this.state );
            // 監聽遠程
            this.getComponent().on('districtchange',( data: any)=>{
                const id: string = data.districtCode;
                this.$store.dispatch('cityListModule/outChangeidEmit',id);

                //没触发连带监听，先写一套解决问题 杜志勋
                this.getComponent().addSickMap(id);
                this.getComponent().showSickMap();
                debugger
            } );
        });

    }
    private beforeDestroy() {
        this.getComponent().unload();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .buttonAreaClass{
      position: absolute;
      top: 190px;
      left:-185px;
      .buttonItem{
          width: 185px;
          height:65px;
          padding-left: 75px;
          padding-top: 18px;
          box-sizing: border-box;
          margin-bottom: 10px;
          color: #a7edff;
          font-size: 18px;
          cursor: pointer;


      }
      .yiqingClass{
          background: url("../../assets/img/zhts/yiqing.png") no-repeat 0px -8px;
      }
      .renkouClass{
          background: url("../../assets/img/zhts/renkou.png") no-repeat 0px  -8px;
      }
      .qianxiClass{
          background: url("../../assets/img/zhts/qianxi.png") no-repeat 0px  -8px;
      }
      .yiqingActive,.yiqingClass:hover{
          background: url("../../assets/img/zhts/yiqing-hover.png") no-repeat 0px -8px;
          color:#fff998;
      }
      .renkouActive,.renkouClass:hover{
          background: url("../../assets/img/zhts/renkou-hover.png") no-repeat 0px  -8px;
          color:#fff998;
      }
      .qianxiActive,.qianxiClass:hover{
          background: url("../../assets/img/zhts/qianxi-hover.png") no-repeat 0px  -8px;
          color:#fff998;
      }
  }

</style>
